<!--
 * @Descripttion: 登陆日志
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-06-09 10:04:00
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-07 09:21:45
-->
<template>
  <div>
    <div class="search">
      <el-select
        clearable
        v-model="value"
        placeholder="选择人员"
        style="margin-right: 10px"
        @change="selectSearch"
      >
        <el-option
          v-for="item in options"
          :key="item.userId"
          :label="item.nickName"
          :value="item.userName"
        >
        </el-option>
      </el-select>
      <el-date-picker
        clearable
        v-model="value2"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="dataSearch"
      >
      </el-date-picker>
    </div>
    <el-table :data="logData" :height="tableHight">
      <template slot="empty" class="emptyBg">
        <img src="@/assets/images/empty.jpg" alt="" />
      </template>
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="用户" prop="userName"> </el-table-column>
      <el-table-column label="时间" prop="loginTime"> </el-table-column>
      <el-table-column label="IP地址" prop="ipaddr"> </el-table-column>
      <el-table-column label="登录地点" prop="loginLocation"> </el-table-column>
      <el-table-column label="终端" prop="browser"> </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total, sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getlogininfor, getUserList } from "../../../api/sys";
export default {
  watch: {
    value2: {
      deep: true,
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
    },
  },
  data() {
    return {
      tableHight: window.innerHeight - 330,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      logData: [],
      value: "",
      value2: "",
      options: [],
    };
  },
  created() {
    this.getLogin();
    this.getList();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    dataSearch() {
      this.getLogin();
    },
    selectSearch() {
      this.getLogin();
    },
    getList() {
      getUserList().then((res) => {
        this.options = res.data;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getLogin();
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      // sessionStorage.setItem("pagenum", val);
      this.pageNum = val;
      this.getLogin();
    },
    async getLogin() {
      let fd = new FormData();
      let Obj = {
        userId: this.value,
        date: this.value2,
      };
      fd.append("logininfor", JSON.stringify(Obj));
      fd.append("pageSize", this.pageSize);
      fd.append("pageNum", this.pageNum);
      let res = await getlogininfor(fd);
      console.log(res);
      this.logData = res.rows;
      this.total = res.total;
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
</style>